<div class="layui-fluid" lay-title="菜单表单">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级菜单</label>
                    <div class="layui-input-block">
                        <input type="text" id="tree" name="tree" lay-filter="tree" autocomplete="off" placeholder="主目录"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="0" title="目录" checked="" lay-filter="menu_type">
                        <input type="radio" name="type" value="1" title="菜单" lay-filter="menu_type">
                        <input type="radio" name="type" value="2" title="按钮" lay-filter="menu_type">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入菜单名称"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" autocomplete="off" placeholder="请输入请求地址" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="display: none">
                    <label class="layui-form-label">权限标志</label>
                    <div class="layui-input-block">
                        <input type="text" name="perms" autocomplete="off" placeholder="请输入权限标志" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">显示顺序</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderNum" lay-verify="required|number" autocomplete="off"
                               placeholder="请输入显示顺序" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="icon" lay-filter="icon" name="icon" placeholder="请选择图标"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['treeSelect', 'admin', 'form', 'laydate', 'iconPicker'], function () {
        var treeSelect = layui.treeSelect
            , $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form
            , iconPicker = layui.iconPicker;
        var sysMenu = {};
        var menuId = POPUP_DATA.menuId;
        var parentMenuId = POPUP_DATA.parentMenuId;
        var treeGrid = POPUP_DATA.treeGrid;
        if (menuId) {
            admin.get({
                url: '/sysMenu/info/' + menuId,
                async: false,
                success: function (res) {
                    if (res.code == 0) {
                        sysMenu = res.menu;
                        showHide(sysMenu.type);
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        }
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/sysMenu/queryMenuList?token=' + admin.loginToken,
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '主目录',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                if (menuId) {
                    if (sysMenu.parentId != 0) {
                        treeSelect.checkNode('tree', sysMenu.parentId);
                    }
                    $("#tree").val(sysMenu.parentId);
                }
                if (parentMenuId) {
                    $("#tree").val(parentMenuId);
                    treeSelect.checkNode('tree', parentMenuId);
                }
                // 获取zTree对象，可以调用zTree方法
                // var treeObj = treeSelect.zTree('tree');
                // console.log(treeObj);
                // 刷新树结构treeSelect.refresh();
            }
        });

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#icon',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: false,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
                sysMenu.icon = data.icon;
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        form.render(null, 'form-group');

        laydate.render({
            elem: '#form-group-date'
        });

        form.val("form-group", {
            "name": sysMenu.name // "name": "value"
            , "url": sysMenu.url
            , "type": sysMenu.type
            , "perms": sysMenu.perms
            , "orderNum": sysMenu.orderNum
        });
        if (sysMenu.type == '0' && sysMenu.icon != null && sysMenu.icon != "") {
            iconPicker.checkIcon('icon', sysMenu.icon);
        }

        form.on('radio(menu_type)', function (data) {
            showHide(data.value);
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
             title: '最终的提交信息'
             })*/
            var field = data.field;
            var type = field.type;
            var menuDate = {};
            var url = "/sysMenu/save";
            if (menuId) {
                url = "/sysMenu/update?_method=PUT";
                menuDate.id = menuId;
            }
            var parentId = field.tree;
            if (parentId != null && parentId != "") {
                menuDate.parentId = parentId;
            }
            menuDate.type = type;
            menuDate.name = field.name;
            menuDate.orderNum = field.orderNum;
            if (type == "0") { // 目录
                menuDate.icon = sysMenu.icon;
            } else if (type == "1") { // 菜单
                menuDate.url = field.url;
                menuDate.perms = field.perms;
            } else if (type == "2") { // 按钮
                menuDate.perms = field.perms;
            }
            admin.post({
                url: url,
                contentType: "application/json",
                data: JSON.stringify(menuDate),
                headers: {
                    "token": admin.loginToken
                },
                success: function (res) {
                    if (res.code == 0) {
                        // 提醒保存成功，关闭当前弹窗
                        layer.msg(res.msg);
                        layer.closeAll();
                        //刷新
                        //ptable.reload();
                        treeGrid.reload("treeTableMenu");
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });

        function showHide(type) {
            if (type == "0") { // 目录
                $("input[name=url]").parents(".layui-form-item").hide();
                $("input[name=perms]").parents(".layui-form-item").hide();
                $("input[name=icon]").parents(".layui-form-item").show();
            } else if (type == "1") { // 菜单
                $("input[name=url]").parents(".layui-form-item").show();
                $("input[name=perms]").parents(".layui-form-item").show();
                $("input[name=icon]").parents(".layui-form-item").hide();
            } else if (type == "2") { // 按钮
                $("input[name=url]").parents(".layui-form-item").hide();
                $("input[name=perms]").parents(".layui-form-item").show();
                $("input[name=icon]").parents(".layui-form-item").hide();
            }
        }
    });


</script>